<template>
    <div class="my-dialog">
        <v-dialog scrollable v-model="dialog" transition="dialog-bottom-transition" :fullscreen="props.fullscreen"
            :style="{ width: props.fullscreen ? 'auto' : (Number(props.width) + 48) + 'px' }" class="max-w-[100%]">
            <template v-slot:activator="{ props: activatorProps }">
                <div v-bind="activatorProps">
                    <slot name="btn">
                        <!-- 触发按钮 -->
                    </slot>
                </div>
            </template>
            <template v-slot:default>
                <slot name="content">
                    <v-card class="my-dialog-card bg-none" :style="{
                        borderRadius: props.fullscreen == false ? '12px' : '0px'
                    }">
                        <v-toolbar class="bg-table-header-bg" :style="{
                            height: props.headerHeight + 'px',
                            borderRadius: props.fullscreen == false ? '12px 12px 0 0' : ''
                        }">
                            <v-toolbar-title class="!text-[16px] !font-[700] !min-w-[60%]">
                                <slot name="header">{{ $t(props.title) }}</slot>
                            </v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-btn class="!w-[32px] !h-[32px] !min-h-[auto] !min-w-[auto] mr-3" @click="handleCloseClick">
                                <svg-icon iconClass="close" size="20"></svg-icon>
                            </v-btn>
                        </v-toolbar>
                        <!-- 顶部内容 -->
                        <div class="w-[100%] bg-surface">
                            <slot name="sticky">
                            </slot>
                        </div>
                        <!-- 中部 -->
                        <v-card-text class="!pt-0 !pb-0 !pl-0 !pr-0 bg-surface" :class="{
                            'max-h-[70vh]': props.fullscreen == false
                        }" :style="{ height: props.height + 'px' }">
                            <mrc_ess_SkeletonLoader v-show="loading" :loading="loading" type="article, article, article"
                                class="pa-6"></mrc_ess_SkeletonLoader>
                            <div v-show="!loading" class="h-full" :class="{
                                'pointer-events-none': loading || btnLoading
                            }">
                                <slot name="default">
                                    <!-- 内容 -->
                                </slot>
                            </div>
                        </v-card-text>
                        <!-- 底部 -->
                        <div class="flex align-center justify-center" :class="{
                            'bg-table-header-bg': props.fullscreen == false,
                            'bg-surface': props.fullscreen == true
                        }" :style="{
                        height: (props.fullscreen == false ? 56 : props.bottomHeight) + 'px',
                        borderRadius: props.fullscreen == false ? '0 0 12px 12px' : ''
                    }" v-if="props.isShowBottom">
                            <slot name="bottom">
                                <v-btn color="secondary" :disabled="btnDisabled" variant="text"
                                    class="ml-3 mr-3 !pl-3 !pr-3 !normal-case" :class="{
                                        '!h-[40px]': props.fullscreen == true,
                                        '!h-[32px]': props.fullscreen == false,
                                    }" @click="handleCancel">{{ $t(props.cancelText) }}</v-btn>
                                <slot name="bottom-btn" :disabled="btnDisabled">

                                </slot>
                                <v-btn color="secondary" :disabled="btnDisabled"
                                    class="ml-3 mr-3 !pl-3 !pr-3 !normal-case" :class="{
                                        '!h-[40px]': props.fullscreen == true,
                                        '!h-[32px]': props.fullscreen == false,
                                    }" @click="handleConfirm" :loading="btnLoading">{{ $t(props.confirmText) }}</v-btn>
                            </slot>
                        </div>
                    </v-card>
                </slot>
            </template>
        </v-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue'
const emit = defineEmits(['confirm', 'cancel', 'close', 'open', 'loading', 'btnLoading'])
const props = defineProps({
    title: {
        type: String,
        default: "label_title"
    },
    width: {
        type: [String, Number],
        default: "600"
    },
    height: {
        type: [String, Number],
        default: "700"
    },
    cancelText: {
        type: String,
        default: "btn_cancel"
    },
    confirmText: {
        type: String,
        default: "btn_confirm"
    },
    fullscreen: {
        type: Boolean,
        default: false
    },
    // 点击确定是否自动关闭弹窗
    autoClose: {
        type: Boolean,
        default: true
    },
    // 点击取消是否自动关闭弹窗
    autoCancel: {
        type: Boolean,
        default: true
    },
    // 顶部栏高度
    headerHeight: {
        type: [Number, String],
        default: "60"
    },
    // 底部栏高度
    bottomHeight: {
        type: [Number, String],
        default: "88"
    },
    // 是否显示底部栏
    isShowBottom: {
        type: Boolean,
        default: true
    }
})
// 按钮是否禁用
const btnDisabled = ref(false);
/**
 * 修改按钮不可用状态
 */
function triggerBtnDisabled(flag: boolean) {
    btnDisabled.value = flag;
}
// 是否显示弹窗
const dialog = ref(false);
watch(dialog, (val: boolean) => {
    if (val == true) {
        emit("open");
    } else {
        emit("close");
        btnLoading.value = false;
        loading.value = false;
    }
})
/**
 * 取消
 */
function handleCancel(event: PointerEvent) {
    if (props.autoCancel == true) {
        dialog.value = false;
    }
    emit("cancel", {
        showLoading,
        hideLoading,
        showBtnLoading,
        hideBtnLoading,
        close,
        open,
        event: event
    });
}
/**
 * 确认
 */
function handleConfirm(event: PointerEvent) {
    if (props.autoClose == true) {
        dialog.value = false;
    }
    emit('confirm', {
        showLoading,
        hideLoading,
        showBtnLoading,
        hideBtnLoading,
        close,
        open,
        event: event
    });
}
/**
 * 关闭
 */
function handleCloseClick(event: PointerEvent) {
    dialog.value = false;
}
/**
 * 显示对话框
 */
function open() {
    if (dialog.value == true) {
        close();
        setTimeout(() => {
            dialog.value = true;
        }, 200);
    } else {
        dialog.value = true;
    }
}
/**
 * 关闭对话框
 */
function close() {
    dialog.value = false;
}
// 是否显示loading
const loading = ref(false);
// 是否显示按钮loading
const btnLoading = ref(false);
/**
 * 展示loading
 */
function showLoading() {
    loading.value = true;
    emit("loading", true);
    btnDisabled.value = true;
}
/**
 * 关闭loading
 */
function hideLoading() {
    loading.value = false;
    emit("loading", false);
    btnDisabled.value = false;
}
/**
 * 确认按钮展示loading
 */
function showBtnLoading() {
    btnLoading.value = true;
    emit("btnLoading", true);
    btnDisabled.value = true;
}
/**
 * 确认按钮取消loading
 */
function hideBtnLoading() {
    btnLoading.value = false;
    emit("btnLoading", false);
    btnDisabled.value = false;
}
defineExpose({
    close,
    open,
    showLoading,
    hideLoading,
    showBtnLoading,
    hideBtnLoading,
    triggerBtnDisabled
})
</script>

<style scoped>
.my-dialog-card :deep(.v-toolbar__content) {
    height: 100% !important;
}
</style>
